<template>
    <div class="dia">
        <el-dialog
                   width="30%"
                   @open="dialogOpen"
                   @closed="dialogClose"
                   v-model="dialogFormVisible" :title="props.title">
            <el-form :model="dialogForm" ref="dialogFormRef" label-width="60px">
                <el-form-item label="" prop="headimgurl">
                    <s-upload v-model="dialogForm.headimgurl"></s-upload>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="dialogForm.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" type="password" prop="password">
                    <el-input v-model="dialogForm.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="dialogForm.nickname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号" prop="sex">
                    <el-input v-model="dialogForm.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" prop="sex">
                    <el-input v-model="dialogForm.email" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="dialogForm.sex" autocomplete="off" />
                </el-form-item>
                <el-form-item label="省份" prop="province">
                    <el-input v-model="dialogForm.province" autocomplete="off" />
                </el-form-item>
                <el-form-item label="城市" prop="city">
                    <el-input v-model="dialogForm.city" autocomplete="off" />
                </el-form-item>
                <el-form-item label="国家" prop="country">
                    <el-input v-model="dialogForm.country" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="ok">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { reactive, ref, watch, watchEffect } from 'vue'



//引入上传组件

import sUpload from "../sDialog/sUpload.vue"
import { ElMessage } from 'element-plus';

//定义组件未来接受的属性

let props = defineProps({
    //弹框的标题
    title: {
        type: String,
        default: '增加学员信息'
    },
    //弹框的操作类型
    action: {
        type: String,
        default: 'add'
    },
    //弹框显示和隐藏
    modelValue: {
        type: Boolean,
        default: false
    },
    //数据回显的字段
    reviewData: {
        type: Object
    }
})

//定义组件将来点击确定和取消触发的方法

let emit = defineEmits(['ok', 'cancel', 'update:modelValue'])

//控制当前组件dialog隐藏和现实的变量
const dialogFormVisible = ref(false)

//侦听父组件传递的props中的dialogVisible变化,变化了就给当前这个组件声明的dialogVisible复制

watch(() => props.modelValue, (newVal) => {
    // console.log(newVal)
    //要判断props中的modelValue是否和当前的dialogFormVisible的值一致
    //如果不一致 才要进行修改
    if (newVal !== dialogFormVisible.value) {
        dialogFormVisible.value = newVal
    }
})




//声明一个响应式变量,存储需要修改的数据的unid

let unid = ref()

const dialogForm = reactive({
    headimgurl: "",
    username: "",
    password: "",
    city: "",
    province: "",
    sex: "",
    country: "",
    headimgurl: "",
    phone: "",
    email: ""
})


//弹窗打开的事件处理函数

let dialogOpen = () => {
    //编辑的时候才需要对数据进行回显操作
    if (props.action === 'edit') {
        // console.log('123213123123123')
        // console.log(props.reviewData)
        //给unid赋值
        unid.value = props.reviewData.unid;

        Object.keys(dialogForm).forEach(key => {
            dialogForm[key] = props.reviewData[key]
        })
        console.log(dialogForm)
    }
}

//dialog关闭的时候触发的逻辑

let dialogClose = () => {
    //清空表单逻辑
    dialogFormRef.value.resetFields()
    //清空输入框的结果
    // Object.keys(dialogForm).forEach(key => {
    //     dialogForm[key] = ""
    // })
    // console.log('closed')
    dialogFormVisible.value = false
    //这段逻辑是为了更新父组件中的dialogVisible的值
    emit('update:modelValue', dialogFormVisible.value)
}

watchEffect(() => {
    console.log(dialogForm.headimgurl)
})


//声明dialogFormRef来对dialogForm组件中的form组件进行引用

let dialogFormRef = ref()

//声明取消和确定按钮的点击事件

let cancel = () => {
    dialogFormVisible.value = false
    emit('cancel')

}

let ok = () => {
    // 调用表单校验的方法
    dialogFormRef.value.validate(valid => {
        if (valid) {
            //表单校验通过,调用父组件自定义的ok方法
            // console.log(dialogFormRef.value)
            //声明一个对象,用于处理不同操作的时候参数的组成
            let newFormData = {};
            //判断是编辑还是增加操作
            if (props.action === 'edit') {
                // 数据需要unid
                newFormData = {
                    unid: unid.value,
                    ...dialogForm
                }
            } else if (props.action === 'add') {
                // 数据不需要unid
                newFormData = { ...dialogForm }
            }
            dialogFormVisible.value = false
            //触发组件自定义的方法,将参数传递给父组件 传递dialogForm中的数据
            delete newFormData.roleid
            emit('ok', newFormData)
        } else {
            ElMessage.error('选项填写不完整,带※号的都需要填写完整')
        }
    })
    // emit('ok')

}



</script>
<style scoped>
.dia :deep(.el-dialog__body) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ida .el-form-item__content {
    justify-content: center !important;
    ;
}
</style>